import React, { Component, Fragment } from 'react'
import { View, Platform } from 'react-native'
import { BoxShadow } from 'react-native-shadow'
import PropTypes from 'prop-types'

export default class CustomBoxShadow extends Component {
  static propTypes = {
    children: PropTypes.node,
    style: PropTypes.object
  }

  constructor (props) {
    super(props)
    this.state = {
      height: props.style.height || 10
    }
  }

  render () {
    return (
      <Fragment>
        {Platform.OS === 'ios' ? this.renderIos() : this.renderAndroid()}
      </Fragment>
    )
  }

  renderIos = () => {
    const {
      children
    } = this.props
    return (
      <View {...this.props} >
        {children}
      </View>
    )
  }

  renderAndroid = () => {
    const {
      children,
      style
    } = this.props
    const {
      width,
      height,
      borderRadius,
      shadowColor,
      shadowRadius,
      shadowOpacity = 0,
      shadowOffset = { width: 0, height: 0 },
      marginTop,
      marginHorizontal,
      marginBottom,
      marginLeft,
      marginRight,
      marginVertical,
      margin,
      marginEnd,
      ...rest
    } = style
    return (
      <BoxShadow setting={{
        width,
        height: this.state.height,
        radius: borderRadius,
        color: shadowColor,
        border: shadowRadius,
        opacity: shadowOpacity / 2,
        x: shadowOffset.width,
        y: shadowOffset.height,
        style: {
          marginTop,
          marginHorizontal,
          marginBottom,
          marginLeft,
          marginRight,
          marginVertical,
          margin,
          marginEnd
        }
      }}>
        <View style={{
          width,
          // height: height || this.state.height,
          ...rest,
          position: 'relative',
          borderRadius,
          zIndex: 2
          // overflow: 'hidden'
        }} onLayout={this.onLayout}>
          {children}
        </View>
      </BoxShadow>
    )
  }

  onLayout = (event) => {
    const viewHeight = event.nativeEvent.layout.height
    console.info(viewHeight)
    if (viewHeight > this.state.height) {
      this.setState({
        height: viewHeight
      })
    }
  }
}
